<template>
  <div class="content">
    <header>
      <p class="title">
         客户管理 - 添加客户
      </p>
    </header>
    <section>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="组织名称" prop="company">
            <el-input v-model="ruleForm.company"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="real_name">
            <el-input v-model="ruleForm.real_name"></el-input>
          </el-form-item>
         <el-form-item label="联系电话" prop="mobile">
           <el-input v-model="ruleForm.mobile"></el-input>
         </el-form-item>
         <el-form-item label="管理员" prop="admin_name">
           <el-input v-model="ruleForm.admin_name"></el-input>
         </el-form-item>
         <el-form-item label="管理员电话" prop="admin_mobile">
           <el-input v-model="ruleForm.admin_mobile"></el-input>
         </el-form-item>
         <el-form-item label="详细地址" prop="address">
           <el-input v-model="ruleForm.address"></el-input>
         </el-form-item>

        </el-form>
        <div class="btn">
          <span @click='submit()'>提交</span>
          <span @click="cancle">取消</span>
        </div>
    </section>

  </div>
</template>

<script>
  import {add_customer} from '../js/getApi.js'
  export default{
    props:['isshow'],
    data(){
      return{
        ruleForm:{
          real_name:'',
          mobile:'',
          company:'',
          admin_name:'',
          admin_mobile:'',
          address:''
        },
        rules: {
               company: [ { required: true, message: '请输入组织名称', trigger: 'blur' }],
               real_name: [ { required: true, message: '请输入联系人', trigger: 'blur' }],
               mobile: [ { required: true, message: '请输入电话号码', trigger: 'blur' }],
               admin_mobile: [ { required: true, message: '请输入管理员电话', trigger: 'blur' }],
               admin_name: [ { required: true, message: '请输入管理员', trigger: 'blur' }],
               address: [ { required: true, message: '请输入详细地址', trigger: 'blur' }]
               }
      }
    },
    methods:{
     async submit(){
        const data=await add_customer(this.$store.state.token,this.ruleForm);
        if(data){
          alert(data.msg);
          if(data.code==1){
            this.$parent.getlist();
            this.cancle();
          }
        }else{
          alert('服务器错误！')
        }
      },
      cancle(){
        this.isshow.cun=true;
        this.isshow.children=false;
      }
    }
  }
</script>

<style scoped>
  header{
    display: flex;
    justify-content:space-between;
    align-items: center;
    height: 84px;
    color: rgba(5, 5, 5, 100);
    font-size: 16px;
    font-family: SourceHanSansSC-regular;
    border-bottom: 1px solid #F7F7F7;
  }
  section{
    margin-top: 30px;
    width: 400px;
  }
  .btn{
    margin-left: 100px;
    margin-top: 100px;
    }
    .btn span{
      display:inline-block;
      cursor: pointer;
    }
 .btn span:nth-of-type(1){
      width: 100px;
      height: 34px;
      line-height:34px;
      border-radius: 2px;
      background-color: rgba(26, 188, 156, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
  }
  .btn span:nth-of-type(2){
      width: 100px;
      height: 34px;
      line-height:34px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 100);
      color: rgba(26, 188, 156, 100);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(26, 188, 156, 100);
      margin-left: 20px;
     }



















</style>
